<template>
  <div class="community-page">
    <!-- 社区头部 -->
    <section class="community-header">
      <div class="container mx-auto px-4 py-6 max-w-[85%]">
        <!-- 顶部导航 -->
        <div class="top-nav flex justify-between items-center mb-6">
          <h1 class="text-2xl font-bold text-gray-900">贵港文旅社区</h1>
          <div class="flex items-center gap-4">
            <el-button :icon="Star" @click="showFavorites = true">
              我的收藏
              <el-badge v-if="favoriteCount" :value="favoriteCount" />
            </el-button>
            <el-button :icon="Document" @click="showMyPosts = true"
              >我的动态</el-button
            >
          </div>
        </div>

        <!-- 搜索栏 -->
        <div class="search-bar flex gap-4">
          <el-input
            v-model="searchQuery"
            placeholder="搜索动态、话题或用户"
            class="search-input flex-1"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
    </section>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8 max-w-[85%]">
      <div class="community-content flex gap-6">
        <!-- 左侧内容区 -->
        <div class="main-content flex-1 max-w-[75%]">
          <!-- 热门推荐轮播图 -->
          <div class="featured-carousel mb-8" v-if="featuredItems.length">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
                精选文章
              </h2>
              <el-button
                :icon="ArrowRight"
                @click="$router.push('/community-articles')"
                text
              >
                查看全部文章
              </el-button>
            </div>
            <el-carousel :interval="4000" type="card" height="280px">
              <el-carousel-item v-for="item in featuredItems" :key="item.id">
                <div
                  class="carousel-item relative h-full rounded-lg overflow-hidden cursor-pointer"
                  @click="handleFeaturedClick(item)"
                >
                  <el-image
                    :src="item.image"
                    fit="cover"
                    class="w-full h-full"
                  />
                  <div
                    class="content-overlay absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/80 to-transparent text-white"
                  >
                    <h3 class="text-xl font-bold mb-2">{{ item.title }}</h3>
                    <p class="text-sm opacity-90 line-clamp-2">
                      {{ item.description }}
                    </p>
                    <div class="mt-2 flex items-center text-sm">
                      <el-avatar
                        :size="24"
                        :src="item.author.avatar"
                        class="mr-2"
                      />
                      <span>{{ item.author.nickname }}</span>
                      <el-divider direction="vertical" />
                      <span>{{ formatTime(item.createTime) }}</span>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

          <!-- 热门话题 -->
          <div class="topics-section mb-8">
            <h2 class="section-title text-xl font-bold mb-4">热门话题</h2>
            <div class="topics-list flex gap-4 overflow-x-auto pb-4">
              <el-tag
                v-for="topic in hotTopics"
                :key="topic.id"
                :type="topic.type"
                class="topic-tag cursor-pointer text-base px-4 py-2"
                @click="handleTopicClick(topic)"
              >
                #{{ topic.name }}
                <span class="ml-2 text-sm opacity-75">({{ topic.count }})</span>
              </el-tag>
            </div>
          </div>

          <!-- 话题分类导航 -->
          <div class="topic-categories mb-8">
            <div class="grid grid-cols-4 gap-4">
              <div
                v-for="category in topicCategories"
                :key="category.id"
                class="category-card bg-white rounded-lg p-4 cursor-pointer hover:shadow-md transition-shadow duration-300"
                @click="handleCategoryClick(category)"
              >
                <div class="flex items-center mb-3">
                  <el-icon :size="24" :class="category.iconClass">
                    <component :is="category.icon" />
                  </el-icon>
                  <span class="ml-2 font-medium">{{ category.name }}</span>
                </div>
                <div class="text-sm text-gray-500">
                  {{ category.description }}
                </div>
                <div class="mt-2 text-xs text-gray-400">
                  {{ category.postsCount }}个内容 ·
                  {{ category.followersCount }}人关注
                </div>
              </div>
            </div>
          </div>

          <!-- 筛选工具栏 -->
          <div class="filter-toolbar bg-white p-4 rounded-lg shadow-sm mb-6">
            <div class="flex flex-wrap gap-4">
              <!-- 排序选项 -->
              <div class="sort-options">
                <el-radio-group
                  v-model="filterConditions.sortBy"
                  @change="handleSortChange"
                >
                  <el-radio-button
                    v-for="option in sortOptions"
                    :key="option.value"
                    :label="option.value"
                  >
                    {{ option.label }}
                  </el-radio-button>
                </el-radio-group>
              </div>

              <!-- 内容类型 -->
              <div class="content-filter">
                <el-select
                  v-model="filterConditions.contentType"
                  placeholder="内容类型"
                  @change="handleContentTypeChange"
                  clearable
                >
                  <el-option
                    v-for="type in contentTypes"
                    :key="type.value"
                    :label="type.label"
                    :value="type.value"
                  />
                </el-select>
              </div>

              <!-- 标签筛选 -->
              <div class="tag-filter flex-1">
                <el-select
                  v-model="filterConditions.tags"
                  multiple
                  collapse-tags
                  collapse-tags-tooltip
                  placeholder="选择标签"
                  @change="handleTagsChange"
                  clearable
                  class="w-full"
                >
                  <el-option
                    v-for="tag in tags"
                    :key="tag.value"
                    :label="tag.label"
                    :value="tag.value"
                  />
                </el-select>
              </div>

              <!-- 重置按钮 -->
              <el-button :icon="Refresh" @click="resetFilters">重置</el-button>
            </div>
          </div>

          <!-- 动态列表 -->
          <div class="posts-list" v-loading="loading">
            <PostCard
              v-for="post in postsList"
              :key="post.id"
              :post="post"
              @like="handleLike"
              @comment="handleComment"
              @share="handleShare"
              @favorite="handleFavorite"
              @report="handleReport"
              class="mb-6"
            />

            <!-- 空状态 -->
            <el-empty
              v-if="!loading && !postsList.length"
              description="暂无相关内容"
            >
              <el-button @click="resetFilters">清除筛选</el-button>
            </el-empty>

            <!-- 分页 -->
            <div
              v-if="total > 0"
              class="pagination-wrapper flex justify-center mt-8"
            >
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[3, 10, 20, 30]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar w-80 flex-shrink-0">
          <!-- 用户信息卡片 -->
          <div class="user-card bg-white rounded-lg shadow-sm p-6 mb-6">
            <div class="flex items-center mb-4">
              <el-avatar
                :size="64"
                :src="userInfo.avatar"
                class="cursor-pointer"
                @click="$router.push(`/user/profile/${userInfo.id}`)"
              />
              <div
                class="ml-4 cursor-pointer"
                @click="$router.push(`/user/profile/${userInfo.id}`)"
              >
                <h3 class="font-bold text-lg">{{ userInfo.nickname }}</h3>
                <p class="text-gray-500">{{ userInfo.signature }}</p>
              </div>
            </div>
            <div class="stats grid grid-cols-3 gap-4 text-center mb-4">
              <div
                class="stat-item cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 p-2 rounded-lg transition-colors"
                @click="showMyPosts = true"
              >
                <div class="text-lg font-bold">{{ userInfo.postsCount }}</div>
                <div class="text-gray-500">动态</div>
              </div>
              <div
                class="stat-item cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 p-2 rounded-lg transition-colors"
                @click="showFollowingDialog = true"
              >
                <div class="text-lg font-bold">
                  {{ userInfo.followingCount }}
                </div>
                <div class="text-gray-500">关注</div>
              </div>
              <div
                class="stat-item cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 p-2 rounded-lg transition-colors"
                @click="showFollowersDialog = true"
              >
                <div class="text-lg font-bold">
                  {{ userInfo.followersCount }}
                </div>
                <div class="text-gray-500">粉丝</div>
              </div>
            </div>
            <el-button
              type="primary"
              class="w-full"
              @click="showPostForm = true"
            >
              发布动态
            </el-button>
          </div>

          <!-- 推荐用户 -->
          <div class="recommended-users bg-white rounded-lg shadow-sm p-6 mb-6">
            <h3 class="font-bold text-lg mb-4">推荐关注</h3>
            <div class="users-list space-y-4">
              <div
                v-for="user in recommendedUsers"
                :key="user.id"
                class="user-item flex items-center justify-between"
              >
                <div
                  class="flex items-center cursor-pointer"
                  @click="$router.push(`/user/profile/${user.id}`)"
                >
                  <el-avatar :size="40" :src="user.avatar" />
                  <div class="ml-3">
                    <div class="font-medium">{{ user.nickname }}</div>
                    <div class="text-sm text-gray-500">
                      {{ user.signature }}
                    </div>
                  </div>
                </div>
                <el-button
                  size="small"
                  :type="user.isFollowing ? 'default' : 'primary'"
                  @click="handleFollow(user)"
                >
                  {{ user.isFollowing ? "已关注" : "关注" }}
                </el-button>
              </div>
            </div>
          </div>

          <!-- 热门活动 -->
          <div class="hot-events bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="font-bold text-lg">热门活动</h3>
              <el-button
                type="primary"
                link
                @click="
                  router.push({ path: '/events', query: { from: 'community' } })
                "
              >
                查看更多
                <el-icon class="ml-1"><ArrowRight /></el-icon>
              </el-button>
            </div>
            <div class="events-list space-y-4">
              <div
                v-for="event in hotEvents"
                :key="event.id"
                class="event-item cursor-pointer hover:bg-gray-50 p-2 rounded-lg"
                @click="handleEventClick(event)"
              >
                <div class="event-image mb-2 relative">
                  <el-image
                    :src="event.image"
                    class="w-full h-40 rounded-lg object-cover"
                  />
                  <div class="event-status absolute top-2 right-2">
                    <el-tag
                      :type="
                        event.status === 'upcoming' ? 'warning' : 'success'
                      "
                      size="small"
                    >
                      {{ event.status === "upcoming" ? "即将开始" : "进行中" }}
                    </el-tag>
                  </div>
                </div>
                <div class="event-info">
                  <div class="font-medium mb-2 line-clamp-2">
                    {{ event.title }}
                  </div>
                  <div class="text-sm text-gray-500 space-y-1">
                    <div class="flex items-center">
                      <el-icon><Calendar /></el-icon>
                      <span class="ml-1">{{ event.date }}</span>
                    </div>
                    <div class="flex items-center">
                      <el-icon><Location /></el-icon>
                      <span class="ml-1">{{ event.location }}</span>
                    </div>
                  </div>
                  <div class="mt-2 flex items-center justify-between text-xs">
                    <div class="text-primary-500">
                      <span class="font-medium">{{
                        event.participantsCount
                      }}</span>
                      人参与
                    </div>
                    <el-button
                      size="small"
                      :type="event.isRegistered ? 'success' : 'primary'"
                      @click.stop="handleEventRegister(event)"
                    >
                      {{ event.isRegistered ? "已报名" : "立即报名" }}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布动态弹窗 -->
    <el-dialog
      v-model="showPostForm"
      title="发布动态"
      width="800px"
      :close-on-click-modal="false"
      destroy-on-close
      class="post-dialog"
    >
      <PostForm
        :hot-topics="hotTopics"
        @cancel="showPostForm = false"
        @submit="handlePostSubmit"
      />
    </el-dialog>

    <!-- 评论弹窗 -->
    <el-dialog
      v-model="showCommentDialog"
      :title="'评论 - ' + (currentPost?.author?.nickname || '')"
      width="600px"
    >
      <CommentSection
        v-if="currentPost"
        :post-id="currentPost.id"
        :comments="currentPost.comments"
        @submit="handleCommentSubmit"
      />
    </el-dialog>

    <!-- 分享弹窗 -->
    <ShareDialog
      v-model="showShareDialog"
      :title="currentPost?.content"
      :url="generateShareUrl(currentPost?.id)"
      :platforms="sharePlatforms"
    />

    <!-- 我的收藏弹窗 -->
    <el-dialog
      v-model="showFavorites"
      title="我的收藏"
      width="1000px"
      :close-on-click-modal="false"
      destroy-on-close
      class="favorites-dialog"
    >
      <MyFavorites />
    </el-dialog>

    <!-- 我的动态弹窗 -->
    <el-dialog
      v-model="showMyPosts"
      title="我的动态"
      width="1000px"
      :close-on-click-modal="false"
      destroy-on-close
      class="my-posts-dialog"
    >
      <MyPosts :hot-topics="hotTopics" />
    </el-dialog>

    <!-- 我的关注弹窗 -->
    <el-dialog
      v-model="showFollowingDialog"
      :title="`我的关注 (${followingList.length})`"
      width="600px"
      :close-on-click-modal="false"
      destroy-on-close
      class="following-dialog"
    >
      <div class="following-list h-[60vh] overflow-y-auto pr-2">
        <div
          v-for="user in followingList"
          :key="user.id"
          class="user-item flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-lg"
        >
          <div
            class="flex items-center cursor-pointer"
            @click="$router.push(`/user/profile/${user.id}`)"
          >
            <el-avatar :size="40" :src="user.avatar" />
            <div class="ml-3">
              <div class="font-medium text-gray-900 dark:text-white">
                {{ user.nickname }}
              </div>
              <div class="text-sm text-gray-500 dark:text-gray-400">
                {{ user.signature }}
              </div>
            </div>
          </div>
          <el-button size="small" type="primary" @click="handleUnfollow(user)"
            >取消关注</el-button
          >
        </div>
        <el-empty v-if="!followingList.length" description="暂无关注" />
      </div>
    </el-dialog>

    <!-- 我的粉丝弹窗 -->
    <el-dialog
      v-model="showFollowersDialog"
      :title="`我的粉丝 (${followersList.length})`"
      width="600px"
      :close-on-click-modal="false"
      destroy-on-close
      class="followers-dialog"
    >
      <div class="followers-list h-[60vh] overflow-y-auto pr-2">
        <div
          v-for="user in followersList"
          :key="user.id"
          class="user-item flex items-center justify-between p-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 rounded-lg"
        >
          <div
            class="flex items-center cursor-pointer"
            @click="$router.push(`/user/profile/${user.id}`)"
          >
            <el-avatar :size="40" :src="user.avatar" />
            <div class="ml-3">
              <div class="font-medium text-gray-900 dark:text-white">
                {{ user.nickname }}
              </div>
              <div class="text-sm text-gray-500 dark:text-gray-400">
                {{ user.signature }}
              </div>
            </div>
          </div>
          <el-button
            size="small"
            :type="user.isFollowing ? 'default' : 'primary'"
            @click="handleFollowFan(user)"
          >
            {{ user.isFollowing ? "已关注" : "关注" }}
          </el-button>
        </div>
        <el-empty v-if="!followersList.length" description="暂无粉丝" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Search,
  Edit,
  Star,
  Document,
  Refresh,
  Calendar,
  Location,
  Food,
  Place,
  House,
  ShoppingCart,
  Sunrise,
  Camera,
  Ticket,
  ArrowRight,
} from "@element-plus/icons-vue";
import PostCard from "@/components/community/PostCard.vue";
import CommentSection from "@/components/spots/CommentSection.vue";
import ShareDialog from "@/components/global/ShareDialog.vue";
import ImageVideoUpload from "@/components/global/ImageVideoUpload.vue";
import PostForm from "@/components/community/PostForm.vue";
import MyFavorites from "@/components/community/MyFavorites.vue";
import MyPosts from "@/components/community/MyPosts.vue";
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import "dayjs/locale/zh-cn";
import service from "@/api/axios"; // 导入axios实例
import { useUserStore } from "@/stores/user";

dayjs.extend(relativeTime);
dayjs.locale("zh-cn");

const router = useRouter();
const loading = ref(false);
const submitting = ref(false);

// 搜索和筛选
const searchQuery = ref("");
const currentPage = ref(1);
const pageSize = ref(3);
const total = ref(0);

// 弹窗控制
const showPostForm = ref(false);
const showCommentDialog = ref(false);
const showShareDialog = ref(false);
const showFavorites = ref(false);
const showMyPosts = ref(false);
const showFollowingDialog = ref(false);
const showFollowersDialog = ref(false);

// 当前操作的动态
const currentPost = ref(null);

// 筛选条件
const filterConditions = reactive({
  sortBy: "newest",
  contentType: "",
  tags: [],
});

// 排序选项
const sortOptions = [
  { label: "最新发布", value: "newest" },
  { label: "最多点赞", value: "most_liked" },
  { label: "最多评论", value: "most_commented" },
  { label: "最多收藏", value: "most_favorited" },
];

// 内容类型
const contentTypes = [
  { label: "全部", value: "" },
  { label: "图文", value: "image" },
  { label: "视频", value: "video" },
  { label: "攻略", value: "guide" },
  { label: "问答", value: "qa" },
];

// 标签选项
const tags = ref([
  { label: "美食", value: "food" },
  { label: "景点", value: "spots" },
  { label: "住宿", value: "hotel" },
  { label: "购物", value: "shopping" },
  { label: "文化", value: "culture" },
]);

// 热门话题
const hotTopics = ref([
  {
    id: 1,
    name: "贵港美食探店",
    count: 1234,
    type: "",
  },
  {
    id: 2,
    name: "文化之旅",
    count: 890,
    type: "success",
  },
  {
    id: 3,
    name: "周末游玩",
    count: 567,
    type: "warning",
  },
  {
    id: 4,
    name: "摄影分享",
    count: 432,
    type: "danger",
  },
]);

// 用户信息
const userInfo = ref({
  id: "",
  avatar:
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.XxfkYMj0NPuoZWimlqH7owHaHa?w=186&h=186&c=7&r=0&o=5&pid=1.7",
  nickname: "游客",
  signature: "这个人很懒，什么都没留下",
  postsCount: 0,
  followingCount: 0,
  followersCount: 0,
});

// 收藏数量
const favoriteCount = computed(() => {
  return userStore.favoriteCount || 0;
});

// 推荐用户
const recommendedUsers = ref([
  {
    id: 1,
    avatar:
      "https://tse2-mm.cn.bing.net/th/id/OIP-C.jKaU6-sP2uwcEEDTGQQdGQHaHa?w=179&h=180&c=7&r=0&o=5&pid=1.7",
    nickname: "贵港达人",
    signature: "专业美食测评",
    isFollowing: false,
  },
  {
    id: 2,
    avatar:
      "https://tse1-mm.cn.bing.net/th/id/OIP-C.NiQHuGVqqbTA_2jfUjZaPAHaHZ?w=194&h=193&c=7&r=0&o=5&pid=1.7",
    nickname: "文化记录者",
    signature: "探索贵港文化",
    isFollowing: true,
  },
]);

// 热门活动
const hotEvents = ref([
  {
    id: 1,
    title: "2024贵港文化节：非遗展演专场",
    image:
      "https://tse3-mm.cn.bing.net/th/id/OIP-C.cPQ0wbCGgx-pOxUKZ0j7vAHaE8?w=229&h=180&c=7&r=0&o=5&pid=1.7",
    date: "2024-04-15",
    location: "贵港市文化中心",
    status: "upcoming",
    participantsCount: 328,
    isRegistered: false,
  },
  {
    id: 2,
    title: "寻味贵港：美食嘉年华",
    image:
      "https://tse1-mm.cn.bing.net/th/id/OIP-C.ENqCoRzfdqSIWH1E6-F8WAHaE7?w=267&h=180&c=7&r=0&o=5&pid=1.7",
    date: "2024-05-01",
    location: "贵港市中心广场",
    status: "ongoing",
    participantsCount: 526,
    isRegistered: true,
  },
  {
    id: 3,
    title: "贵港古镇摄影大赛",
    image:
      "https://tse3-mm.cn.bing.net/th/id/OIP-C.EUTa7N1SN4pfzRe0gQWM3gHaE-?w=134&h=183&c=7&r=0&o=5&pid=1.7",
    date: "2024-05-15",
    location: "贵港古镇景区",
    status: "upcoming",
    participantsCount: 156,
    isRegistered: false,
  },
]);

// 动态列表
const postsList = ref([]);

// 发布表单
const postForm = reactive({
  content: "",
  media: [],
  topics: [],
  location: "",
});

// 表单校验规则
const postRules = {
  content: [
    { required: true, message: "请输入动态内容", trigger: "blur" },
    { min: 1, max: 1000, message: "内容长度在1到1000个字符", trigger: "blur" },
  ],
};

// 分享平台
const sharePlatforms = [
  { name: "weixin", icon: "wechat", label: "微信" },
  { name: "weibo", icon: "weibo", label: "微博" },
  { name: "qq", icon: "qq", label: "QQ" },
];

// 热门推荐内容
const featuredItems = ref([]);

// 话题分类
const topicCategories = ref([
  {
    id: 1,
    name: "美食探店",
    description: "发现贵港地道美食，分享舌尖上的惊喜",
    icon: "Food",
    iconClass: "text-orange-500",
    postsCount: 1234,
    followersCount: 567,
  },
  {
    id: 2,
    name: "景点游览",
    description: "打卡贵港特色景点，领略自然人文之美",
    icon: "Place",
    iconClass: "text-blue-500",
    postsCount: 986,
    followersCount: 432,
  },
  {
    id: 3,
    name: "住宿体验",
    description: "精选贵港特色民宿、酒店推荐",
    icon: "House",
    iconClass: "text-green-500",
    postsCount: 645,
    followersCount: 321,
  },
  {
    id: 4,
    name: "购物攻略",
    description: "本地特产、购物中心、文创商品推荐",
    icon: "ShoppingCart",
    iconClass: "text-pink-500",
    postsCount: 789,
    followersCount: 234,
  },
  {
    id: 5,
    name: "文化探索",
    description: "深入了解贵港历史文化与民俗风情",
    icon: "Sunrise",
    iconClass: "text-purple-500",
    postsCount: 567,
    followersCount: 345,
  },
  {
    id: 6,
    name: "摄影分享",
    description: "定格贵港最美瞬间，分享精彩图片",
    icon: "Camera",
    iconClass: "text-cyan-500",
    postsCount: 890,
    followersCount: 456,
  },
  {
    id: 7,
    name: "活动资讯",
    description: "最新文旅活动、展览、演出信息",
    icon: "Ticket",
    iconClass: "text-yellow-500",
    postsCount: 432,
    followersCount: 234,
  },
  {
    id: 8,
    name: "达人攻略",
    description: "本地达人分享的深度游玩攻略",
    icon: "Guide",
    iconClass: "text-red-500",
    postsCount: 678,
    followersCount: 345,
  },
]);

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).fromNow();
};

// 获取用户信息
const getUserInfo = async () => {
  try {
    // 调用获取用户信息API
    const response = await service.get("/user/profile");
    console.log("获取到的用户信息:", response);
    
    // 正确提取响应中的数据
    const userData = response && response.data ? response.data : response;
    
    if (userData) {
      // 更新用户信息
      userInfo.value = {
        id: userData.id || "",
        avatar: userData.avatar || "https://tse1-mm.cn.bing.net/th/id/OIP-C.XxfkYMj0NPuoZWimlqH7owHaHa?w=186&h=186&c=7&r=0&o=5&pid=1.7",
        nickname: userData.nickname || "游客",
        signature: userData.signature || userData.bio || "这个人很懒，什么都没留下",
        postsCount: userData.postsCount || 0,
        followingCount: userData.followingCount || 0,
        followersCount: userData.followersCount || 0,
      };
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
    // 使用默认数据，不显示错误消息
  }
};

// 获取热门话题
const fetchHotTopics = async () => {
  try {
    // 调用热门话题API
    const response = await service.get("/public/topics/hot");
    console.log("获取热门话题响应:", response);
    
    if (response && Array.isArray(response)) {
      // 后端返回了数据
      const tagTypes = ["", "success", "warning", "danger", "info"]; // 可用的标签类型
      
      // 将API返回的数据转换为前端所需的格式
      hotTopics.value = response.map((topic, index) => ({
        id: topic.id,
        name: topic.name,
        count: topic.postsCount || topic.count || 0,
        type: tagTypes[index % tagTypes.length] // 循环使用标签类型
      }));
    } else {
      console.log("后端返回的热门话题数据格式不正确，使用测试数据");
      // 保留测试数据，不需要做任何操作
    }
  } catch (error) {
    console.error("获取热门话题失败:", error);
    // 保留测试数据，不显示错误消息给用户
  }
};

// 获取全部话题并筛选热门话题
const fetchAllTopics = async () => {
  try {
    // 调用全部话题API
    const response = await service.get("/public/topics");
    console.log("获取全部话题响应:", response);
    
    if (response && Array.isArray(response)) {
      // 后端返回了数据
      const tagTypes = ["", "success", "warning", "danger", "info"]; // 可用的标签类型
      
      // 按话题帖子数量排序，选取前8个作为热门话题
      const sortedTopics = [...response].sort((a, b) => {
        const countA = a.postsCount || a.count || 0;
        const countB = b.postsCount || b.count || 0;
        return countB - countA; // 降序排列
      }).slice(0, 8); // 取前8个
      
      // 将数据转换为前端所需的格式
      hotTopics.value = sortedTopics.map((topic, index) => ({
        id: topic.id,
        name: topic.name,
        count: topic.postsCount || topic.count || 0,
        type: tagTypes[index % tagTypes.length] // 循环使用标签类型
      }));
    } else {
      console.log("后端返回的话题数据格式不正确，使用测试数据");
      // 保留测试数据，不需要做任何操作
    }
  } catch (error) {
    console.error("获取话题失败:", error);
    // 保留测试数据，不显示错误消息给用户
  }
};

// 获取话题分类
const fetchTopicCategories = async () => {
  try {
    // 调用话题分类API
    const response = await service.get("/public/topics/categories");
    console.log("获取话题分类响应:", response);
    
    if (response && Array.isArray(response)) {
      // 定义图标映射关系
      const iconMapping = {
        "food": { icon: "Food", iconClass: "text-orange-500" },
        "spots": { icon: "Place", iconClass: "text-blue-500" },
        "hotel": { icon: "House", iconClass: "text-green-500" },
        "shopping": { icon: "ShoppingCart", iconClass: "text-pink-500" },
        "culture": { icon: "Sunrise", iconClass: "text-purple-500" },
        "photo": { icon: "Camera", iconClass: "text-cyan-500" },
        "event": { icon: "Ticket", iconClass: "text-yellow-500" },
        "guide": { icon: "Guide", iconClass: "text-red-500" },
        // 默认图标
        "default": { icon: "Food", iconClass: "text-gray-500" }
      };
      
      // 将API返回的数据转换为前端所需的格式
      topicCategories.value = response.map(category => {
        const iconInfo = iconMapping[category.code] || iconMapping.default;
        
        return {
          id: category.id,
          name: category.name,
          description: category.description || `探索${category.name}相关的内容`,
          icon: iconInfo.icon,
          iconClass: iconInfo.iconClass,
          postsCount: category.postsCount || 0,
          followersCount: category.followersCount || 0
        };
      });
    } else {
      console.log("后端返回的话题分类数据格式不正确，使用测试数据");
      // 保留测试数据，不需要做任何操作
    }
  } catch (error) {
    console.error("获取话题分类失败:", error);
    // 保留测试数据，不显示错误消息给用户
  }
};

// 获取标签
const fetchTags = async () => {
  try {
    // 调用标签API
    const response = await service.get("/public/topics/tags");
    console.log("获取标签响应:", response);
    
    if (response && Array.isArray(response)) {
      // 将API返回的数据转换为前端所需的格式
      tags.value = response.map(tag => ({
        label: tag.name,
        value: tag.code || tag.id
      }));
    } else {
      console.log("后端返回的标签数据格式不正确，使用测试数据");
      // 保留测试数据，不需要做任何操作
    }
  } catch (error) {
    console.error("获取标签失败:", error);
    // 保留测试数据，不显示错误消息给用户
  }
};

// 获取推荐内容
const getFeaturedItems = async () => {
  try {
    // 调用文章列表API，获取精选文章
    const response = await service.get("/public/articles", {
      params: {
        featured: true,
        limit: 5 // 限制获取的文章数量
      }
    });
    
    if (response && response.data && Array.isArray(response.data)) {
      // 将API返回的数据转换为轮播图所需的格式
      featuredItems.value = response.data.map(article => ({
        id: article.id,
        title: article.title,
        description: article.description,
        image: article.cover,
        author: article.author,
        createTime: article.createTime,
        type: "article"
      }));
    } else {
      // 使用测试数据作为后备
      featuredItems.value = [
        {
          id: 1,
          title: "探秘贵港古镇：一场穿越时空的文化之旅",
          description:
            "走进贵港古镇，感受千年历史文化的积淀，品味独特的建筑风格，聆听动人的民间故事...",
          image:
            "https://tse4-mm.cn.bing.net/th/id/OIP-C.xckYTevixTU6_8QS3ShgzQHaHa?w=182&h=183&c=7&r=0&o=5&pid=1.7",
          author: {
            avatar:
              "https://tse3-mm.cn.bing.net/th/id/OIP-C.uJxWYReJujTw4vyZTDag2wAAAA?w=147&h=150&c=7&r=0&o=5&pid=1.7",
            nickname: "文化记录者",
          },
          createTime: "2024-03-15 10:00:00",
          type: "article",
        },
        {
          id: 2,
          title: "贵港美食地图：寻味八桂名城",
          description:
            "带你走遍贵港大街小巷，发现最地道的美食，感受最真实的烟火气...",
          image:
            "https://img2.baidu.com/it/u=3017461739,1807906418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
          author: {
            avatar:
              "https://tse2-mm.cn.bing.net/th/id/OIP-C.gn7_IS6nCbwsTqKteprztQHaEo?w=264&h=180&c=7&r=0&o=5&pid=1.7",
            nickname: "贵港达人",
          },
          createTime: "2024-03-14 15:30:00",
          type: "guide",
        },
        {
          id: 3,
          title: "2024贵港文化节精彩瞬间",
          description:
            "记录贵港文化节最精彩的表演和活动，展现贵港独特的文化魅力...",
          image:
            "https://img1.baidu.com/it/u=1674155470,3193774651&fm=253&fmt=auto&app=120&f=JPEG?w=750&h=500",
          author: {
            avatar:
              "https://tse3-mm.cn.bing.net/th/id/OIP-C.mnaB3H9SXttIZCjwP2MA_wHaHa?w=168&h=180&c=7&r=0&o=5&pid=1.7",
            nickname: "活动记录员",
          },
          createTime: "2024-03-13 20:00:00",
          type: "event",
        },
      ];
    }
  } catch (error) {
    console.error("获取推荐内容失败:", error);
    // 使用测试数据作为后备
    featuredItems.value = [
      {
        id: 1,
        title: "探秘贵港古镇：一场穿越时空的文化之旅",
        description:
          "走进贵港古镇，感受千年历史文化的积淀，品味独特的建筑风格，聆听动人的民间故事...",
        image:
          "https://tse4-mm.cn.bing.net/th/id/OIP-C.xckYTevixTU6_8QS3ShgzQHaHa?w=182&h=183&c=7&r=0&o=5&pid=1.7",
        author: {
          avatar:
            "https://tse3-mm.cn.bing.net/th/id/OIP-C.uJxWYReJujTw4vyZTDag2wAAAA?w=147&h=150&c=7&r=0&o=5&pid=1.7",
          nickname: "文化记录者",
        },
        createTime: "2024-03-15 10:00:00",
        type: "article",
      },
      {
        id: 2,
        title: "贵港美食地图：寻味八桂名城",
        description:
          "带你走遍贵港大街小巷，发现最地道的美食，感受最真实的烟火气...",
        image:
          "https://img2.baidu.com/it/u=3017461739,1807906418&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667",
        author: {
          avatar:
            "https://tse2-mm.cn.bing.net/th/id/OIP-C.gn7_IS6nCbwsTqKteprztQHaEo?w=264&h=180&c=7&r=0&o=5&pid=1.7",
          nickname: "贵港达人",
        },
        createTime: "2024-03-14 15:30:00",
        type: "guide",
      },
    ];
  }
};

// 从接口获取热门活动
const fetchHotEvents = async () => {
  try {
    const response = await service.get("/public/events", {
      params: {
        limit: 3 // 只获取3条热门活动
      }
    });
    console.log("后端返回的热门活动数据:", response);
    
    // 标准响应格式：{code: 200, message: '操作成功', data: [...]}
    const eventsData = response && response.data ? response.data : [];
                     
    if (eventsData && eventsData.length > 0) {
      // 处理后端返回的数据，转换为社区页面热门活动需要的格式
      hotEvents.value = eventsData.map(event => ({
        id: event.id,
        title: event.title,
        image: event.image || event.coverImage || "/images/events/default.jpg",
        date: dayjs(event.startTime).format("YYYY-MM-DD"),
        location: event.location,
        status: event.status,
        participantsCount: event.participantsCount || 0,
        isRegistered: false // 默认未报名，实际项目可能需要从用户报名记录中获取
      }));
      console.log("处理后的热门活动数据:", hotEvents.value);
    } else {
      console.log("后端返回的热门活动数据为空，使用测试数据");
      // 保留测试数据
    }
  } catch (error) {
    console.error("获取热门活动失败:", error);
    // 保留测试数据
  }
};

// 处理话题点击
const handleTopicClick = (topic) => {
  // 如果话题存在于标签列表中，添加到筛选条件
  const existingTag = tags.value.find(tag => tag.label.includes(topic.name));
  if (existingTag) {
    if (!filterConditions.tags.includes(existingTag.value)) {
      filterConditions.tags = [...filterConditions.tags, existingTag.value];
    }
  } else {
    // 或者直接使用搜索功能
    searchQuery.value = `#${topic.name}`;
  }
  // 重置页码并执行筛选
  currentPage.value = 1;
  handleFilter();
};

// 处理分类点击
const handleCategoryClick = async (category) => {
  try {
    // 记录当前分类ID
    const categoryId = category.id;
    
    // 可以直接跳转到分类页面
    router.push(`/community/topic/${categoryId}`);
    
    // 或者，获取该分类下的内容并在当前页面显示
    // searchQuery.value = category.name;
    // currentPage.value = 1;
    // handleFilter();
  } catch (error) {
    console.error("处理分类点击失败:", error);
    ElMessage.error("操作失败");
  }
};

// 处理筛选
const handleFilter = async () => {
  loading.value = true;
  try {
    const params = {
      ...filterConditions,
      search: searchQuery.value,
    };

    // 调用筛选API - 不传递分页参数，获取全部数据
    let allPosts = [];
    try {
      const response = await service.get("/public/posts", { params });
      
      // 处理响应数据
      if (response.items && Array.isArray(response.items)) {
        allPosts = response.items;
      } else if (Array.isArray(response)) {
        // 如果直接返回数组
        allPosts = response;
      }
    } catch (error) {
      console.error("API调用失败:", error);
      // 使用本地模拟数据
      allPosts = [
        // 模拟数据
        {
          id: 1,
          content: "今天探访了贵港最古老的街道，感受传统文化的魅力...",
          media: [
            "https://vd3.bdstatic.com/mda-qjpgyasi23r4xtqg/576p/h264/1729771127458415610/mda-qjpgyasi23r4xtqg.mp4?auth_key=1741680145-0-0-05f7adf0566cf65b15dc46bb08225ebb&bcevod_channel=searchbox_feed&pd=1&cr=1&cd=0&pt=4&logid=0144995184&vid=18247876378714270721&abtest=all",
          ],
          author: {
            id: 1,
            avatar:
              "https://tse2-mm.cn.bing.net/th/id/OIP-C.B571QYtsLRvrUvdDN75d7wHaHa?w=201&h=156&c=7&r=0&o=5&pid=1.7",
            nickname: "文化记录者",
          },
          createTime: "2024-03-15 10:00:00",
          likes: 128,
          comments: 32,
          shares: 15,
          isLiked: false,
          isFavorited: false,
        },
        // 可以添加更多测试数据...
      ];
    }
    
    // 设置总数
    total.value = allPosts.length;
    
    // 前端分页处理
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const endIndex = startIndex + pageSize.value;
    postsList.value = allPosts.slice(startIndex, endIndex);
    
  } catch (error) {
    console.error("获取动态列表失败:", error);
    // 不显示错误消息给用户
  } finally {
    loading.value = false;
  }
};

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  handleFilter();
};

// 处理排序变化
const handleSortChange = () => {
  currentPage.value = 1;
  handleFilter();
};

// 处理内容类型变化
const handleContentTypeChange = () => {
  currentPage.value = 1;
  handleFilter();
};

// 处理标签变化
const handleTagsChange = () => {
  currentPage.value = 1;
  handleFilter();
};

// 重置筛选
const resetFilters = () => {
  Object.assign(filterConditions, {
    sortBy: "newest",
    contentType: "",
    tags: [],
  });
  searchQuery.value = "";
  currentPage.value = 1;
  handleFilter();
};

// 处理点赞
const handleLike = async (post) => {
  try {
    // TODO: 调用点赞API
    await new Promise((resolve) => setTimeout(resolve, 500));
    post.isLiked = !post.isLiked;
    post.likes += post.isLiked ? 1 : -1;
    ElMessage.success(post.isLiked ? "点赞成功" : "已取消点赞");
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败");
  }
};

// 处理评论
const handleComment = (post) => {
  currentPost.value = post;
  showCommentDialog.value = true;
};

// 提交评论
const handleCommentSubmit = async (content) => {
  try {
    // TODO: 调用评论API
    await new Promise((resolve) => setTimeout(resolve, 500));
    ElMessage.success("评论成功");
    showCommentDialog.value = false;
    handleFilter(); // 刷新列表
  } catch (error) {
    console.error("评论失败:", error);
    ElMessage.error("评论失败");
  }
};

// 处理分享
const handleShare = (post) => {
  currentPost.value = post;
  showShareDialog.value = true;
};

// 生成分享链接
const generateShareUrl = (postId) => {
  return `${window.location.origin}/community/post/${postId}`;
};

// 处理收藏
const handleFavorite = async (post) => {
  try {
    // TODO: 调用收藏API
    await new Promise((resolve) => setTimeout(resolve, 500));
    post.isFavorited = !post.isFavorited;
    ElMessage.success(post.isFavorited ? "收藏成功" : "已取消收藏");
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败");
  }
};

// 处理举报
const handleReport = async (post) => {
  try {
    await ElMessageBox.confirm("确定要举报这条内容吗？", "举报确认", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    // TODO: 调用举报API
    await new Promise((resolve) => setTimeout(resolve, 500));
    ElMessage.success("举报已提交，我们会尽快处理");
  } catch {
    // 用户取消操作
  }
};

// 处理关注
const handleFollow = async (user) => {
  try {
    // TODO: 调用关注API
    await new Promise((resolve) => setTimeout(resolve, 500));
    user.isFollowing = !user.isFollowing;
    ElMessage.success(user.isFollowing ? "关注成功" : "已取消关注");
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败");
  }
};

// 处理活动点击
const handleEventClick = (event) => {
  router.push({
    path: `/community/event/${event.id}`,
    query: { from: "community" },
  });
};

// 处理图片超出限制
const handleExceed = () => {
  ElMessage.warning("最多只能上传9张图片/视频");
};

// 提交动态
const handlePostSubmit = async (postData) => {
  submitting.value = true;
  try {
    // TODO: 调用发布API
    await new Promise((resolve) => setTimeout(resolve, 1000));

    ElMessage.success("发布成功");
    showPostForm.value = false;

    // 刷新列表
    currentPage.value = 1;
    handleFilter();
  } catch (error) {
    console.error("发布失败:", error);
    ElMessage.error("发布失败");
  } finally {
    submitting.value = false;
  }
};

// 分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
  handleFilter();
};

// 页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  handleFilter();
};

// 监听筛选条件变化
watch(
  filterConditions,
  () => {
    currentPage.value = 1;
    handleFilter();
  },
  { deep: true },
);

// 处理轮播图点击
const handleFeaturedClick = (item) => {
  router.push(`/community/article/${item.id}`);
};

// 处理活动报名
const handleEventRegister = (event) => {
  event.isRegistered = !event.isRegistered;
  ElMessage.success(event.isRegistered ? "报名成功" : "已取消报名");
};

// 关注列表
const followingList = ref([
  {
    id: 1,
    avatar: "/images/avatar/user1.jpg",
    nickname: "贵港达人",
    signature: "专业美食测评",
  },
  {
    id: 2,
    avatar: "/images/avatar/user2.jpg",
    nickname: "文化记录者",
    signature: "探索贵港文化",
  },
]);

// 粉丝列表
const followersList = ref([
  {
    id: 3,
    avatar: "/images/avatar/user3.jpg",
    nickname: "旅行摄影师",
    signature: "记录贵港美景",
    isFollowing: true,
  },
  {
    id: 4,
    avatar: "/images/avatar/user4.jpg",
    nickname: "美食博主",
    signature: "发现地道美食",
    isFollowing: false,
  },
]);

// 取消关注
const handleUnfollow = async (user) => {
  try {
    await ElMessageBox.confirm("确定要取消关注该用户吗？", "取消关注", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    // TODO: 调用取消关注API
    await new Promise((resolve) => setTimeout(resolve, 500));
    const index = followingList.value.findIndex((item) => item.id === user.id);
    if (index !== -1) {
      followingList.value.splice(index, 1);
      userInfo.value.followingCount--;
    }
    ElMessage.success("已取消关注");
  } catch {
    // 用户取消操作
  }
};

// 关注/取消关注粉丝
const handleFollowFan = async (user) => {
  try {
    // TODO: 调用关注/取消关注API
    await new Promise((resolve) => setTimeout(resolve, 500));
    user.isFollowing = !user.isFollowing;
    if (user.isFollowing) {
      userInfo.value.followingCount++;
      ElMessage.success("关注成功");
    } else {
      userInfo.value.followingCount--;
      ElMessage.success("已取消关注");
    }
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败");
  }
};

// 页面加载时获取数据
onMounted(async () => {
  await Promise.all([
    getUserInfo(),         // 获取用户信息
    fetchAllTopics(),      // 获取热门话题
    fetchTopicCategories(), // 获取话题分类
    fetchTags(),           // 获取标签
    getFeaturedItems(),
    fetchHotEvents(),
  ]);
  handleFilter();
});

// 导入用户状态管理
const userStore = useUserStore();
</script>

<style lang="scss" scoped>
.community-page {
  @apply min-h-screen bg-gray-50 dark:bg-gray-900;

  .community-header {
    @apply bg-white dark:bg-gray-800 shadow-sm relative mb-6;

    h1 {
      @apply text-gray-900 dark:text-white;
    }

    .container {
      @apply relative;
    }

    .search-bar {
      @apply max-w-2xl mx-auto;

      .search-input {
        :deep(.el-input__wrapper) {
          height: 42px;
          border: 1px solid #dcdfe6;
          border-radius: 8px;
          transition: all 0.3s ease;
          box-shadow: none;

          &:hover {
            border-color: #409eff;
          }

          &.is-focus {
            border-color: #409eff;
            box-shadow: 0 0 0 1px rgba(64, 158, 255, 0.2);
          }
        }

        :deep(.el-input__inner) {
          height: 42px;
          line-height: 42px;
        }

        :deep(.el-input__prefix) {
          color: #909399;
          font-size: 18px;
          transition: color 0.3s ease;
        }

        &:hover {
          :deep(.el-input__prefix) {
            color: #409eff;
          }
        }
      }

      :deep(.el-button) {
        height: 42px;
        padding: 11px 20px;
        border-radius: 8px;
        transition: all 0.3s ease;
      }
    }
  }

  .community-content {
    .main-content {
      .topics-section {
        .section-title {
          @apply text-gray-900 dark:text-white;
        }

        .topics-list {
          @apply -mx-4 px-4;

          &::-webkit-scrollbar {
            @apply h-1.5;
          }

          &::-webkit-scrollbar-track {
            @apply bg-transparent;
          }

          &::-webkit-scrollbar-thumb {
            @apply bg-gray-300 dark:bg-gray-600 rounded-full;
          }
        }

        .topic-tag {
          @apply whitespace-nowrap transition-all duration-300;

          &:hover {
            @apply transform -translate-y-0.5;
          }
        }
      }

      .topic-categories {
        .category-card {
          @apply bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 
                 shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] dark:shadow-[0_2px_12px_0_rgba(0,0,0,0.3)]
                 transition-all duration-300;

          &:hover {
            @apply border-primary-500/30 dark:border-primary-500/30 
                   bg-primary-50 dark:bg-primary-900/20
                   shadow-[0_4px_20px_0_rgba(0,0,0,0.15)] dark:shadow-[0_4px_20px_0_rgba(0,0,0,0.4)];

            .el-icon {
              @apply transform scale-110;
            }
          }

          .el-icon {
            @apply transition-transform duration-300;
          }

          .category-title {
            @apply text-gray-900 dark:text-white font-medium;
          }

          .text-description {
            @apply text-gray-600 dark:text-gray-400;
          }

          .text-meta {
            @apply text-gray-500 dark:text-gray-500;
          }
        }
      }

      .filter-toolbar {
        @apply bg-white dark:bg-gray-800 
               border border-gray-200 dark:border-gray-700
               shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] dark:shadow-[0_2px_12px_0_rgba(0,0,0,0.3)];

        &:hover {
          @apply shadow-[0_4px_20px_0_rgba(0,0,0,0.15)] dark:shadow-[0_4px_20px_0_rgba(0,0,0,0.4)];
        }

        .sort-options {
          :deep(.el-radio-group) {
            @apply flex flex-wrap gap-2;
          }
        }

        .filter-options {
          @apply flex gap-4;

          :deep(.el-select) {
            @apply min-w-[160px];
          }
        }
      }
    }

    .sidebar {
      .user-card,
      .recommended-users,
      .hot-events {
        @apply bg-white dark:bg-gray-800 
               border border-gray-200 dark:border-gray-700
               shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] dark:shadow-[0_2px_12px_0_rgba(0,0,0,0.3)]
               transition-all duration-300;

        &:hover {
          @apply shadow-[0_4px_20px_0_rgba(0,0,0,0.15)] dark:shadow-[0_4px_20px_0_rgba(0,0,0,0.4)];
        }

        h3 {
          @apply text-gray-900 dark:text-white;
        }

        .text-meta {
          @apply text-gray-500 dark:text-gray-400;
        }

        .text-title {
          @apply text-gray-900 dark:text-white;
        }
      }

      .event-item {
        @apply transition-all duration-300;

        &:hover {
          @apply transform -translate-y-0.5 bg-gray-50 dark:bg-gray-700/50;
        }

        .event-info {
          .text-title {
            @apply text-gray-900 dark:text-white;
          }

          .text-meta {
            @apply text-gray-500 dark:text-gray-400;
          }

          .text-highlight {
            @apply text-primary-500 dark:text-primary-400;
          }
        }
      }
    }
  }

  .featured-carousel {
    :deep(.el-carousel__item) {
      &.is-active {
        .carousel-item {
          @apply transform scale-105 
                 shadow-[0_4px_20px_0_rgba(0,0,0,0.15)] dark:shadow-[0_4px_20px_0_rgba(0,0,0,0.4)];
        }
      }
    }

    .carousel-item {
      @apply transition-all duration-300;

      :deep(.el-image) {
        @apply dark:brightness-90;
      }
    }

    .content-overlay {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 30%,
        rgba(0, 0, 0, 0) 100%
      );
    }
  }

  :deep(.el-pagination) {
    @apply dark:bg-transparent;

    .el-pagination__total {
      @apply text-gray-500 dark:text-gray-400;
    }

    .el-pagination__jump {
      @apply text-gray-500 dark:text-gray-400;
    }

    .el-input__inner {
      @apply dark:bg-gray-700 text-gray-900 dark:text-gray-300 dark:border-gray-600;
    }

    button {
      @apply dark:bg-transparent text-gray-500 dark:text-gray-400;

      &:disabled {
        @apply dark:text-gray-600;
      }
    }

    .el-pager li {
      @apply dark:bg-transparent text-gray-500 dark:text-gray-400;

      &.active {
        @apply dark:text-primary-500;
      }
    }
  }

  .following-dialog,
  .followers-dialog {
    :deep(.el-dialog__body) {
      @apply p-6 dark:bg-gray-800;
    }

    .following-list,
    .followers-list {
      scrollbar-width: thin;
      scrollbar-color: theme("colors.gray.400") theme("colors.gray.200");

      &::-webkit-scrollbar {
        @apply w-2;
      }

      &::-webkit-scrollbar-track {
        @apply bg-gray-200 dark:bg-gray-700 rounded-full;
      }

      &::-webkit-scrollbar-thumb {
        @apply bg-gray-400 dark:bg-gray-600 rounded-full;

        &:hover {
          @apply bg-gray-500 dark:bg-gray-500;
        }
      }
    }

    .user-item {
      @apply bg-white dark:bg-gray-800 mb-2 last:mb-0;
    }
  }

  :deep(.el-dialog) {
    @apply dark:bg-gray-800;

    .el-dialog__header {
      @apply dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700;

      .el-dialog__title {
        @apply dark:text-white;
      }
    }

    .el-dialog__body {
      @apply dark:bg-gray-800 p-6;
    }

    .el-dialog__footer {
      @apply dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700;
    }
  }

  .posts-list {
    .post-card {
      @apply bg-white dark:bg-gray-800 
             border border-gray-200 dark:border-gray-700
             shadow-[0_2px_12px_0_rgba(0,0,0,0.1)] dark:shadow-[0_2px_12px_0_rgba(0,0,0,0.3)]
             transition-all duration-300;

      &:hover {
        @apply shadow-[0_4px_20px_0_rgba(0,0,0,0.15)] dark:shadow-[0_4px_20px_0_rgba(0,0,0,0.4)];
      }

      .post-header {
        @apply border-b border-gray-100 dark:border-gray-700;

        .user-name {
          @apply text-gray-900 dark:text-white font-medium;
        }

        .post-time {
          @apply text-gray-500 dark:text-gray-400;
        }
      }

      .post-content {
        .post-text {
          @apply text-gray-900 dark:text-white;
        }

        .post-images {
          :deep(.el-image) {
            @apply dark:brightness-90;
          }
        }
      }

      .post-footer {
        @apply border-t border-gray-100 dark:border-gray-700;

        .action-button {
          @apply text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400;
        }

        .stats {
          @apply text-gray-500 dark:text-gray-400;
        }
      }
    }
  }

  .my-posts-dialog {
    :deep(.el-dialog__body) {
      @apply p-6 dark:bg-gray-800;

      .post-card {
        @apply dark:bg-gray-800 dark:border-gray-700;
      }

      .post-content {
        @apply dark:text-gray-300;
      }

      .post-footer {
        @apply dark:border-gray-700;

        .action-button {
          @apply dark:text-gray-400 dark:hover:text-primary-400;
        }
      }

      .el-empty {
        @apply dark:bg-gray-800;

        .el-empty__description {
          @apply dark:text-gray-400;
        }
      }
    }
  }
}

.favorites-dialog,
.my-posts-dialog {
  :deep(.el-dialog__body) {
    @apply p-6 dark:bg-gray-800;
  }
}

.post-dialog {
  :deep(.el-dialog) {
    @apply dark:bg-gray-800;

    .el-dialog__header {
      @apply dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700;

      .el-dialog__title {
        @apply dark:text-white;
      }
    }

    .el-dialog__body {
      @apply dark:bg-gray-800 p-6;
    }

    .el-dialog__footer {
      @apply dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700;
    }
  }
}

.following-dialog,
.followers-dialog {
  :deep(.el-dialog__body) {
    @apply p-6 dark:bg-gray-800;
  }
}
</style>
